<template>
  <div class="outer-wrapper" :class="'skin-' + $root.skin">
    <PublicHeader></PublicHeader>
    <div class="diy-detail">
      <div
        class="diy-item"
        :class="{ level: item.name }"
        v-for="(item, index) in diyDetail"
        :key="index"
      >
        <div
          class="diy-content"
          :style="
            item.sizeFit
              ? {
                  flex: '0 0 ' + item.size.width + 'px',
                  width: item.size.width + 'px',
                  height: item.size.height + 'px',
                }
              : {}
          "
        >
          <img
            v-if="item.name"
            src="~@/assets/diy/close.png"
            class="close-button"
            @click="closeComponent(index)"
          />
          <component class="border-echart" :is="item.name" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import PublicHeader from "@/components/publicHeader.vue";
import * as PageData from "@/utils/page.js";

// 首页 --start--
import sstjlef from "./modules/sstjlef.vue";
import sstjys from "./modules/sstjys.vue";
import sstjyx from "./modules/sstjyx.vue";
import sstjyz from "./modules/sstjyz.vue";
import sstjzb from "./modules/sstjzb.vue";
import sstjzs from "./modules/sstjzs.vue";
import sstjzx from "./modules/sstjzx.vue";
import sstjzz from "./modules/sstjzz.vue";
Vue.filter("formateMoney", (num) => {
  return num.toString().replace(/\d+/, function (n) {
    return n.replace(/(\d)(?=(?:\d{4})+$)/g, "$1,");
  });
});

// 收入 --end--
export default {
  components: {
    PublicHeader,
    sstjlef,
    sstjys,
    sstjyx,
    sstjyz,
    sstjzb,
    sstjzs,
    sstjzx,
    sstjzz,
  },
  data() {
    return {
      diyDetail: [],
    };
  },
  created() {
    this.diyDetail = PageData.PageSy;
  },
};
</script>

<style lang="scss">
@import "~@/assets/styles/common.scss";
</style>
